<template>
    <div class="login">
        <div class="logo">
            <img src="../../assets/logo.png" alt/>
        </div>
        <van-cell-group>
            <van-field
                    class="input"
                    v-model="data.mobile"
                    required
                    placeholder="请输入手机号"
                    @click-icon="mobile = ''"
                    clearable
                    :error-message="errorMsg.mobile"
            />
            <van-field
                    class="input"
                    v-model="data.password"
                    placeholder="请输入密码"
                    clearable
                    required
                    :error-message="errorMsg.password"
            />
            <div class="tip">
                <router-link class="reg" to="./register">立即注册</router-link>
                <router-link to="./forget">忘记密码?</router-link>
            </div>
            <van-button class="login-btn" block @click="login">登录</van-button>
        </van-cell-group>
    </div>
</template>
<script>
    import api from "../../utils/restful";
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import validator from "@/utils/validation.js"; //引进token解析模块
    import axios from "axios";

    export default {
        name: "login",
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                data: {
                    mobile: "",
                    password: ""
                },
                errorMsg: {
                    mobile: "",
                    password: ""
                },
                rules: {
                    mobile: [
                        {
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    callback("手机号码不能为空");
                                } else if (/^[1][3-9][0-9]{9}$/.test(value)) {
                                    callback();
                                } else {
                                    callback("请输入正确的手机号码");
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"}
                    ]
                }
            };
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            login() {
                const instance = axios.create({});
                this.validate((errors, fields) => {
                    if (!errors) {
                        console.log(this.data.mobile , this.data.password)
                        instance({
                            method: "post",
                            url: api.login,
                            data: this.$qs.stringify({
                                mobile: this.data.mobile,
                                type: 1,
                                password: this.data.password
                            })
                        }).then(res => {
                            console.log(res);
                            console.log(res.data);
                            if (res.data.code == 200) {
                                localStorage.setItem("token", res.data.data.token);
                                this.$router.push("/");
                            } else {
                                this.$toast(res.data.msg);
                            }
                        });
                    }
                });
            },
            resetField(attrs) {
                attrs = !attrs
                    ? Object.keys(this.errorMsg)
                    : Array.isArray(attrs)
                        ? attrs
                        : [attrs];
                attrs.forEach(attr => {
                    this.errorMsg[attr] = "";
                });
            },
            validate(callback, data) {
                this.validator.validate((errors, fields) => {
                    this.resetField();
                    if (errors) {
                        fields.forEach(item => {
                            this.errorMsg[item.field] = item.message;
                        });
                    }
                    callback && callback(errors, fields);
                }, data);
            }
        },
        created() {
            this.validator = validator(this.rules, this.data);
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .login {
        background-color: #222;
        background-image: url("../../assets/background.png");
        //   background-position: bottom bottom;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .logo {
        height: 28vh;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;

        img {
            max-width: 40vw;
        }
    }

    .login-btn {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: rgba(255, 255, 255, 0.2) !important;
        border: none;
        color: #fff;
        border-radius: 25px;
    }

    .tip {
        display: flex;
        justify-content: space-between;
        .font-dpr(14px);
        margin-top: 20px;

        a {
            color: rgba(255, 255, 255, 0.8);
        }
    }

    [class*="van-hairline"]::after {
        border: none;
    }

    .van-cell-group {
        padding: 0 60px;
        background-color: transparent;

        .input {
            margin-bottom: 10px;
            width: 100%;
            height: 40px;
            background: rgba(35, 35, 35, 0.2);
            border-radius: 5px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .van-cell--required::before {
            color: transparent;
        }

        .van-cell:not(:last-child)::after {
            display: none;
        }
    }

    /deep/ .van-field__control {
        color: #fff !important;
    }
</style>